<template>
<!-- 结构 -->
  <div>
    <el-card shadow="always">
      <!-- 头部 -->
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      </el-breadcrumb>
      </div>
      <!-- 表单 -->
       <el-form label-width="80px">
        <el-form-item label="状态：">
          <el-radio-group v-model="reqParams.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="2">草稿</el-radio>
            <el-radio :label="3">待审核</el-radio>
            <el-radio :label="4">审核通过</el-radio>
            <el-radio :label="5">审核失败</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <!-- <el-select v-model="reqParams.channel_id" placeholder="请选择频道" clearable>
            <el-option
              v-for="item in channelOPtions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
          <!-- 封装频道列表 -->
          <geekChannel v-model="reqParams.channel_id"></geekChannel>
        </el-form-item>
        <el-form-item label="日期：">
          <div class="block">
          <el-date-picker
            v-model="dataArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="filterArticles">筛选</el-button>
        </el-form-item>
       </el-form>
       {{ reqParams }}

    </el-card>
    <!-- 表格 -->
     <el-card shadow="always" style="margin-top: 20px;">
      <div slot="header">
        根据筛选条件共查询到 {{ total }} 条结果
      </div>
      <el-table :data="articleList">
        <el-table-column label="封面">
          <!-- 使用作用域插槽，自定义列内容 -->
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover.images[0]"
              :preview-src-list="scope.row.cover.images"
              fit="cover"
              >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" width="200"></el-table-column>
        <el-table-column label="状态" prop="status">

         <template slot-scope="scope">
          <!-- {{ scope.row.status }} -->
          <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="info">待审核</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="danger">审核失败</el-tag>
         </template>

        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate" width="200"></el-table-column>
        <el-table-column label="阅读数" prop="read_count"></el-table-column>
        <el-table-column label="评论数" prop="comment_count"></el-table-column>
        <el-table-column label="点赞数" prop="like_count"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle plain @click="$router.push(`/publish/${scope.row.id}`)" :disabled="isPendingReview"></el-button>
            <el-button @click="deleteArticle(scope.row.id)" type="danger" icon="el-icon-delete" circle plain ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
       <el-pagination
        style="margin-top: 20px;"
        :total="total"
        :page-sizes="[2, 5,10,20]"
        :page-size.sync="reqParams.per_page"
        :current-page.sync="reqParams.page"
        @current-change="getActicleList()"
        @size-change="getActicleList()"
        layout="total, sizes, prev, pager, next, jumper"
        >
    </el-pagination>
     </el-card>
  </div>
</template>

<script>
// 逻辑
export default {
  data () {
    return {
      reqParams: {
        status: null, // 选中全部状态
        channel_id: null, // 下拉框默认选中
        begin_pubdate: null,
        end_pubdate: null,
        page: 1, // 当前页
        per_page: 5, // 每页显示多少条
        articles: []
      },
      channelOPtions: [], // 频道下拉框数据
      // 日期数组
      dataArr: [],
      // 文章列表
      articleList: [],
      total: 0,
      isPendingReview: false
    }
  },
  watch: {
    // 侦听日期数组变化
    dataArr: {
      deep: true,
      handler (value) {
        console.log(value)
        if (value === null) {
          this.reqParams.begin_pubdate = null
          this.reqParams.end_pubdate = null
        } else {
          this.reqParams.begin_pubdate = value[0]
          this.reqParams.end_pubdate = value[1]
        }
      }
    }
  },
  created () {
    this.getChannelList()
    this.getActicleList()
  },
  methods: {
    async getChannelList () {
      const res = await this.$http.get('/v1_0/channels')
      // console.log(res)
      this.channelOPtions = res.data.data.channels
    },
    async getActicleList () {
      const res = await this.$http.get('/v1_0/mp/articles', { params: this.reqParams })
      // console.log(res)
      this.articleList = res.data.data.results
      this.total = res.data.data.total_count
      // 检查文章状态，假设状态字段为 status，1 表示待审核
      if (this.reqParams.status === 1) {
        this.isPendingReview = true
        this.$message.warning('文章正在待审核，不能编辑')
      }
    },
    filterArticles () {
      // 重置页码为1
      this.reqParams.page = 1
      // 重新发送请求获取文章列表
      this.getActicleList()
    },
    deleteArticle (id) {
      this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.delete(`/v1_0/mp/articles/${id}`)
        this.getActicleList()
        this.$message.success('删除成功')
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped>
/* 样式 */

</style>
